<template>
    <div>
      <el-container>
        <el-aside width="200px"></el-aside>
        <el-main>
      <el-row>

        <el-col :span="24" ><div class="grid-content2 bg-purple-dark">
          <font size="6px">当前等级：lv8</font><br>
          <div>
            <el-slider
              v-model="value2"
              :step="10"
              :marks="marks"
              show-stops
            style="color: red;width: 80%">
            </el-slider><br/><br/>
            <font size="4px">等级权限每天下午2点更新</font><br/><br/>
            <font size="4px">当前等级特权：</font><br/><br/>
            <font size="4px">60G音乐云盘免费容量</font><br><br/>
            <font size="4px">黑名单上限100</font>
            <font size="4px">距离下个等级:lv9</font><br/><br/>
            <div >
              <font style="float: left">听歌：</font><el-progress :percentage="percentage" :color="customColors" style="width: 30%"  :format="format"></el-progress>
              <br/><font style="float: left">登录：</font><el-progress :percentage="percentage1" :color="customColors1" style="width: 30%"  :format="format1"></el-progress>
            </div>

          </div>


        </div></el-col>
      </el-row>
        </el-main>

        <el-aside width="200px"></el-aside>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "level",
      data() {
        return {
          input: '',
          currentDate: new Date(),
          url:'static/logo2.png',
          circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          value2:80,
          marks: {
            0: '0',
            10: '1',
            20:'2',
            30:'3',
            40:'4',
            50:'5',
            60:'6',
            70:'7',
            80:'8',
            90:'9',
            100:'100'
          },
          percentage: 30,
          percentage1: 100,
          customColors:'#ff0000',
          customColors1:'#ff0000'
        }
      },
      methods: {
        format(percentage) {
          return percentage === 100 ? '满' : `还需要听${10000-percentage}首歌`;
        },
        format1(percentage) {
          return percentage === 100 ? '还需要在线0天' : `还需要在线${100-percentage}天`;
        },

      }

    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
/*  &:last-child {
     margin-bottom: 0;
   }*/
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #242424;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
  }
  .grid-content1 {
    border-radius: 4px;
    min-height: 50px;
    background-color: red;
  }
  .grid-content2 {
    border-radius: 4px;
    min-height: 50px;
    background-color: #effffd;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
</style>
